<div class="header">
    <h2>Quiz</h2>
</div>

<div class="message">
    {% autoescape false %}{{ section.content }}{% endautoescape %}
</div>


{% for quiz in section.quiz %}
<div class="question">
    <div class="question-header">Question {{ loop.index }} of {{ section.quiz.length }}</div>

    <div class="question-content">
        <div class="alert alert-success hidden">
            <b>Correct!</b>
        </div>

        <div class="alert alert-danger error-message hidden">
            <p><b>Not quite!</b></p>
            {% autoescape false %}{{ quiz.feedback }}{% endautoescape %}
        </div>

        <div class="question-inner">
        {% autoescape false %}{{ quiz.base }}{% endautoescape %}
        </div>
    </div>

    <div class="hidden question-answers">
        <div class="question-inner">
        {% autoescape false %}{{ quiz.solution }}{% endautoescape %}
        </div>
    </div>
</div>
{% endfor %}

<div class="buttons">
    <a href="#" class="button size-2 action-submit">Submit</a>
    <a href="#" class="button size-2 action-solution">Solution</a>
</div>
